<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠券活动 - 超级市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
    <link rel="stylesheet" href="/styles/activityCenter.css">
</head>

<body>
    <main id="app">
        <!-- 导航栏 -->
        <header>
            <nav>
                <div class="logo-container">
                    <img src="/photo/Profile picture/logo.png" alt="超市Logo" class="logo">
                    <div class="brand-name">超级<span>市场</span></div>
                </div>

                <div class="hamburger" @click="toggleMenu">
                    <i class="fas fa-bars"></i>
                </div>

                <ul class="nav-links" :class="{ active: menuOpen }">
                    <li><a href="index-ai.html"><i class="fas fa-home"></i> 首页</a></li>
                    <li><a href="order.html"><i class="fas fa-shopping-bag"></i> 我的订单</a></li>
                    <li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                    <li><a href="#" class="active"><i class="fas fa-tags"></i> 优惠活动</a></li>
                    <li class="user-info">
                        <div class="user-avatar">
                            <img :src="userAvatarUrl" alt="用户头像">
                        </div>
                        <span class="user-name" @click="handleUserClick">{{ username }}</span>
                        <div class="avatar-dropdown" v-if="username !== '请登录'">
                            <a href="/profile.html" target="_blank" class="dropdown-item">
                                <i class="fas fa-user"></i> 个人信息
                            </a>
                            <a href="#" @click.prevent="logout" class="dropdown-item">
                                <i class="fas fa-sign-out-alt"></i> 退出
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>
        </header>

        <!-- 优惠券活动区域 -->
        <section class="coupon-activities">
            <div class="section-header">
                <h2 class="section-title">优惠券活动</h2>
                <p class="section-subtitle">领取专属优惠券，享受购物折扣</p>
            </div>

            <div class="coupon-filters">
                <button class="filter-btn" :class="{active: activeFilter === 'all'}"
                    @click="filterCoupons('all')">全部优惠券</button>
                <button class="filter-btn" :class="{active: activeFilter === 'available'}"
                    @click="filterCoupons('available')">可领取</button>
                <button class="filter-btn" :class="{active: activeFilter === 'claimed'}"
                    @click="filterCoupons('claimed')">已领取</button>
            </div>

            <div class="coupon-grid">
                <div v-if="loading" class="loading">
                    <i class="fas fa-spinner fa-spin"></i> 正在加载优惠券...
                </div>

                <div v-else-if="filteredCoupons.length === 0" class="empty-state">
                    <i class="fas fa-gift"></i>
                    <p>当前没有可用的优惠券</p>
                </div>

                <div v-else v-for="coupon in filteredCoupons" :key="coupon.couponId" class="coupon-card">
                    <div class="coupon-header">
                        <div class="coupon-value">¥<span>{{ coupon.couponPrice }}</span></div>
                        <div class="coupon-type">{{ coupon.couponType === 0 ? '通用券' : '品类券' }}</div>
                    </div>
                    <div class="coupon-body">
                        <h3 class="coupon-title">{{ coupon.couponName }}</h3>
                        <p class="coupon-condition">满{{ coupon.couponCondition }}元可用</p>
                        <!-- 新增领取条件显示 -->
                        <p class="coupon-requirement">
                            <i class="fas fa-info-circle"></i> 领取后七天内有效 
                        </p>
                        <p class="coupon-expiry">有效期至: {{ formatDate(coupon.couponEndTime) }}</p>
                    </div>
                    <div class="coupon-actions">
                        <button class="claim-btn" :class="{'pulse': coupon.status === 'available'}"
                            :disabled="coupon.status !== 'available'" @click="claimCoupon(coupon)">
                            <i class="fas"
                                :class="coupon.status === 'available' ? 'fa-gift' : (coupon.status === 'claimed' ? 'fa-check' : 'fa-times')"></i>
                            {{ coupon.status === 'available' ? '立即领取' : (coupon.status === 'claimed' ? '已领取' : '已过期') }}
                        </button>
                    </div>
                    <div v-if="coupon.couponType === 1" class="new-user-badge">新人专享</div>
                    <div v-if="coupon.status === 'expired'" class="coupon-tag">已过期</div>
                </div>
            </div>
        </section>
    </main>

    <script src="/js/activityCenter.js">  </script>
</body>

</html>